<template>
  <div class="uploader-image">
    <div class="uploader-box clear">
      <div class="uploader-inner cover-uploader">
        <uploader class="uploader-example" :options="options" :autoStart="true" ref="uploaderImg"
          :file-status-text="statusText" @files-submitted="fileSubmitImg" @file-success="fileSuccessImg"
          @file-error="fileFailImg">
          <uploader-unsupport></uploader-unsupport>
          <uploader-btn :directory="false" :attrs="attrsImg" :single="true">
            <img v-if="picture" :src="this.BASE_URL + picture">
            <template v-else>
              <i class="el-icon-upload"></i>
              <span style="font-size:12px">（支持 bmp/jpg/jpeg/png,不超过10M）</span>
            </template>
          </uploader-btn>
          <uploader-list></uploader-list>
          <div class="uploader-close-box" v-show="picture">
            <label class="el-upload-list__item-status-label" @click="pictureRemove">
              <transition name="el-fade-in-linear">
                <i class="el-icon-upload-success el-icon-check"></i>
              </transition>
              <transition name="el-fade-in-linear">
                <i class="el-icon-close"></i>
              </transition>
            </label>
          </div>
        </uploader>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    options: Object,/*请求头配置项 */
    picture: String,/*图片路径 */
  },
  data() {
    return {
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传..."
      },
      attrsImg: {
        accept: ['image/*']
      },
      imageType: ['image/jpeg', 'image/bmp', 'image/png'], // 上传图片格式
    };
  },
  methods: {
    //过滤文件格式
    fileSubmitImg(files, fileList, event) {
      for (let i = 0; i < fileList.length; i++) {
        let file_type = fileList[i].fileType.toLocaleLowerCase();

        if (!this.imageType.includes(file_type)) {
          this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
          this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
        } else if (fileList[i].size > 10240000) {
          this.$message.warning('只允许上传10M以内的文件');
          this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
        } else {
          if (this.$refs.uploaderImg.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploaderImg.uploader.removeFile(this.$refs.uploaderImg.uploader.fileList[0]);
          }
        }
      }
    },
    pictureRemove() {
      this.$refs.uploaderImg.uploader.cancel();
      this.$emit('imgListen', '');
    },
    //上传成功的事件
    fileSuccessImg(rootFile, file, message, chunk) {
      let mess = eval("(" + message + ")");
      mess = handleResponseData(mess);

      if (parseInt(mess.data.status) === 1) {
        this.$emit('imgListen', mess.data);
      }
    },
    fileFailImg(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      if (parseInt(mess.error) === 401) {
        let callbcak = data => {
          this.$refs.uploaderImg.retry(file);
        };
        this.get_access_token(callbcak);
      }
    },
  }
};
</script>

<style lang="scss">
.uploader-image {
  .uploader-box {
    .uploader-inner {
      display: inline-block;

      .uploader {
        width: 280px;
        height: 160px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;

        .uploader-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          border: none;
          width: 100%;
          height: 100%;
          padding: 0;

          i {
            font-size: 80px;
            color: #9cd1ff;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .uploader-close-box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

          .el-upload-list__item-status-label {
            display: block;
            position: absolute;
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #13ce66;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #ccc;

            .el-icon-check {
              font-size: 12px;
              margin-top: 12px;
              color: #fff;
              transform: rotate(-45deg);
              font-family: 'element-icons' !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
              -webkit-font-smoothing: antialiased;
            }

            .el-icon-check:before {
              content: "\E6DA";
            }

            .el-icon-close {
              display: none;
            }
          }
        }

        .uploader-close-box:hover {
          .el-upload-list__item-status-label {
            top: -4px;
            right: -15px;
            background: #f56c6c;
            box-shadow: none;
            cursor: pointer;

            .el-icon-check {
              display: none;
            }

            .el-icon-close {
              position: absolute;
              transform: rotate(-45deg);
              top: 10px;
              color: #fff;
              right: 14px;
              font-family: 'element-icons' !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
              -webkit-font-smoothing: antialiased;
            }

            .el-icon-close:before {
              content: "\E6DB";
            }
          }
        }

        .uploader-list {
          position: relative;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);

          .uploader-file {
            position: relative;
            width: 76%;
            height: 100%;
            margin: 0 auto;
            border-bottom: none;
            overflow: hidden;
          }

          .uploader-file-progress {
            height: 10px;
            top: 58px;
            background: #3ce642;
          }

          .uploader-file-info {
            height: 49px;
            line-height: 49px;
            margin-top: 60px;
            font-size: 12px;
            color: #fff;
            z-index: 1;
          }

          .uploader-file-name,
          .uploader-file-meta {
            display: none;
          }

          .uploader-file-size {
            width: 40%;
            text-indent: 0;
          }

          .uploader-file-status {
            width: 48%;
            text-indent: 0;
          }

          .uploader-file-actions {
            .uploader-file-remove {
              position: absolute;
              width: 24px;
              height: 24px;
              line-height: 24px;
              border-radius: 50%;
              color: #fff;
              text-align: center;
              margin: 0;
              background: #ef5c5c;
              top: 50%;
              transform: translateY(-50%);

              &::before {
                display: inline-block;
                content: "x";
              }
            }
          }
        }
      }
    }

    .video-uploader {
      .uploaderList {
        z-index: 10;
      }
    }
  }
}
</style>
